<template>
  <div class="global-param">
    <div class="global-param-opt">
      <div class="global-param-search">
        <el-form
            label-width="100px"
            size="small"
            :inline="true"
            label-position="left"
        >
          <el-form-item label="变量名检索">
            <el-input
                @input="handleCardSwipe"
                v-model="SearchValue"
                placeholder="请输入变量名"
                clearable
                style="width: 222px"
            />
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="small" type="primary" @click="FindTableDataBtn">
          查询
        </el-button>
        <el-button size="small" type="primary" @click="AddTableDataBtn">
          新增
        </el-button>
      </div>
    </div>
    <div class="global-param-table">
      <!--        其他表格内容元素-->
      <el-table
          :data="GlobalParams"
          max-height="700"
          style="width: 100%;user-select: text;font-size:12px"
      >
        <el-table-column prop="Name" label="变量名">
          <template #default="scope">
            <el-tag>#{{ scope.row.Id }}</el-tag>
            <span>{{ scope.row.Name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Value" label="变量值"/>
        <el-table-column prop="Type" label="类型"/>
        <el-table-column prop="Desc" label="描述"/>
        <el-table-column label="操作" width="135">
          <template #default="scope">
            <el-button
                @click="OnDelete(scope.row)"
                type="text"
                size="small"
                :data-userid="scope.row.id"
                :data-role="scope.row.role"
            >删除
            </el-button>
            <el-button
                @click="OnEdit(scope.row)"
                type="text"
                size="small"
                :data-userid="scope.row.id"
                :data-role="scope.row.role"
            >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        append-to-body
        :close-on-click-modal="false"
        title="编辑数据"
        custom-class="app-event-dialog us-none"
        v-model="ShowAddTableDataDialog"
        width="30%"
        top="15vh"
    >
      <el-form ref="paramFrom" :model="paramFrom" label-width="125px" size="small">
        <el-form-item
            label="Id"
            prop="Id"
            style="display: none"
        >
          <el-input v-model="paramFrom.Id"></el-input>
        </el-form-item>
        <el-form-item
            label="名称"
            prop="Name"
        >
          <el-input v-model="paramFrom.Name"></el-input>
        </el-form-item>
        <el-form-item
            label="类型"
            prop="Type"
        >
          <el-select v-model="paramFrom.Type" clearable placeholder="请选择变量类型" style="width: 100%">
            <el-option
                v-for="item in DataType"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="值"
            prop="Value"
        >
          <el-input v-model="paramFrom.Value"></el-input>
        </el-form-item>
        <el-form-item
            label="描述"
            prop="Desc"
        >
          <el-input type="textarea" v-model="paramFrom.Desc"></el-input>
        </el-form-item>
        <el-form-item style="display: flex;justify-content: end">
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="onClose()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Utils from '../../utils/Common'
import { AppParams } from '@/utils/appParams'
import { GlobalParam } from '@/api/GlobalParamApi'
import { Emitter } from "@/utils/Emitter";
import { MessageSuccess, MessageWarning } from "@/utils";

export default {
  name: 'GlobalParam',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show (n, o) {
      if (n) {
        this.VisibleGlobalParamDialog = true
      }
    }
  },
  data () {
    return {
      VisibleGlobalParamDialog: false,
      SearchForm: {
        field: null,
        value: null,
        Where: null
      },
      SearchValue: null,
      TableNames: [],
      GlobalParams: [],
      _GlobalParams: [],
      Roles: AppParams.COMMON.BUSINESS_USER_ROLE,
      DataType: AppParams.COMMON.DATA_TYPE,
      Fields: [],
      CurrentPage: 1,
      Size: 12,
      Total: 0,
      TotalPage: 0,
      ShowAddTableDataDialog: false,
      ShowRenameAliasDialog: false,
      ShowUserPermissionsDialog: false,
      FieldMapping: {},
      TableAlias: null,
      IsAuthentication: Utils.IsAuthentication(),
      UserInfo: Utils.GetLoginUserInfo(),
      paramFrom: {
        Id: null,
        Name: '',
        Value: '',
        Type: '',
        Desc: ''
      }
    }
  },
  methods: {
    handleCloseModal () {
      this.VisibleGlobalParamDialog = false
      this.$emit('close')
    },
    /**
     * 监听编辑事件
     * @param item
     * @param index
     * @constructor
     */
    OnEdit (item, index) {
      this.ShowAddTableDataDialog = true
      this.$nextTick(() => {
        this.paramFrom = Object.assign({}, item)
      })
    },
    /**
     * 监听删除事件
     * @param item
     * @param index
     * @constructor
     */
    OnDelete (item, index) {
      this.$confirm(`是否删除变量名称${item.Name}？`, `确认删除`, {
        distinguishCancelAndClose: true,
        roundButton: true,
        confirmButtonClass: 'el-button--warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        GlobalParam.DeleteGlobalParam(item.Id).then((res) => {
          if (res) {
            this.AddSuccess()
            MessageSuccess('删除成功')
          } else {
            MessageWarning('删除失败')
          }
        })
      })
    },
    /**
     * 监听保存按钮事件
     */
    onSave () {
      GlobalParam.AddGlobalParam(this.paramFrom).then((res) => {
        if (res) {
          this.AddSuccess()
          MessageSuccess('保存成功')
          this.onClose()
        } else {
          MessageWarning('保存失败')
        }
      })
    },
    onClose () {
      if (this.$refs.paramFrom) {
        this.$refs.paramFrom.resetFields()
      }
      this.ShowAddTableDataDialog = false
    },
    AddSuccess () {
      this.LoadTables()
      this.onClose()
    },
    FindTableDataBtn () {
      this.handleCardSwipe()
    },
    AddTableDataBtn () {
      delete this.paramFrom.Id
      this.ShowAddTableDataDialog = true
      this.$refs.paramFrom.resetFields()
    },
    /**
     * 加载表格
     * @constructor
     */
    LoadTables () {
      GlobalParam.GetGlobalParams().then((res) => {
        this.GlobalParams = res.Data
        this._GlobalParams = res.Data
      })
    },
    handleCardSwipe (v) {
      if (Utils.IsEmpty(this.SearchValue)) {
        this.LoadTables()
        return
      }
      this.GlobalParams = this._GlobalParams.filter(g => g.Name.includes(this.SearchValue))
    }
  },
  mounted () {
    console.log('1234567890987654321234567')
    Emitter.on('qwerty', () => {
      console.log('又来了')
      this.VisibleGlobalParamDialog = true
    })
    this.LoadTables()
  }
}
</script>

<style lang="less">
.global-param {
  font-size: 12px;

  .global-param-opt {
    padding-bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .global-param-search {
      display: flex;
    }
  }

  .global-param-table {
    display: flex;
    flex-direction: row;
  }
}
</style>
